<template>
	<view>
		<view class="usInfoTop flex flex-column flex-y-center flex-x-center">
			<button class="userImgBox" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image v-if="userInfo&&!userInfo.avatar" class="userImg" src="@/static/images/tx.png" mode="widthFix">
				</image>
				<image v-else class="userImg" :src="userInfo.avatar" mode="widthFix"></image>
			</button>
			<view class="flex flex-y-center flex-x-center">
				<image class="img" src="@/static/images/nicheng.png" mode=""></image>
				<input type="nickname" placeholder-class="placeholder" class="input line1 " placeholder="请输入昵称"
					v-model="userInfo.nickName" @blur="changeNc" />
				<image class="img" src="@/static/images/sj.png" mode=""></image>
				<text>{{userInfo&&userInfo.phonenumber?userInfo.phonenumber:'暂无'}}</text>
			</view>
		</view>
		<view style="padding:  30rpx;margin-bottom: 200rpx;">
			<view class="gsList flex flex-y-center flex-x-between" @click="jump">
				<view class="flex flex-y-center">
					<image class="img mr10" src="@/static/images/jl.png" mode="widthFix"></image>
					<text>我的估算记录</text>
				</view>
				<image class="img1" src="@/static/images/jt.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="tcBtn" @click="tcClick">退出</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue'
	import store from "/store/index.js";
	import {
		useStore
	} from "vuex";
	const {
		dispatch,
		state,
		commit
	} = useStore();
	import {
		updateInfo
	} from "@/api/index.js";
	const userInfo = ref({
		avatar: '',
		phonenumber: '',
		nickName: ''
	});
	const jump = () => {
		uni.navigateTo({
			url: '/pages/gsList/gsList?pageType=gsList'
		})
	}
	onShow(() => {
		// 未登录提示登录
		if (!store.state.token) {
			uni.showModal({
				title: '提示',
				content: '请先去登录哦！',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}
			});
		}
		if (store.state.userInfo) {
			userInfo.value = store.state.userInfo
			console.log(userInfo.value);
		}
	})
	// 更新头像
	const onChooseAvatar = (e) => {
		console.log(e);
		const {
			avatarUrl
		} = e.detail
		// console.log(avatarUrl);
		wx.getFileSystemManager().readFile({
			filePath: avatarUrl, //选择图片返回的相对路径
			encoding: 'base64', //编码格式
			success: res => {
				let base64 = 'data:image/jpg;base64,' + res.data;
				updateInfo({
					userId: store.state.userInfo.userId,
					avatar: base64,
					userName: store.state.userInfo.userName
				}).then((res) => {
					// 更新完以后更新store用户信息
					if (res.code == 200) {
						userInfo.value.avatar = base64;
						uni.$showMsg(res.msg);
						let obj = {
							...store.state.userInfo,
							avatar: base64
						}
						commit("SET_USER_INFO", obj);
						// dispatch("getUserInfo", true);
					} else {
						uni.$showMsg('请联系管理员')
					}
				})
			}
		})
	}
	// 修改昵称
	const changeNc = (e) => {
		nextTick(() => {
			setTimeout(() => {
				console.log(e);
				console.log(userInfo.value.nickName);
				if (!userInfo.value.nickName) {
					return;
				}
				updateInfo({
					userId: store.state.userInfo.userId,
					userName: store.state.userInfo.userName,
					nickName: userInfo.value.nickName,
				}).then((res) => {
					// 更新完以后更新store用户信息
					if (res.code == 200) {
						uni.$showMsg(res.msg);
						let obj = {
							...store.state.userInfo,
							nickName: userInfo.value.nickName
						}
						commit("SET_USER_INFO", obj);
						// dispatch("getUserInfo", true);
					} else {
						uni.$showMsg('请联系管理员')
					}
				})
			}, 500)
		})
	}
	const tcClick = () => {
		uni.showModal({
			title: '提示',
			content: '你确定退出吗?',
			success: function(res) {
				if (res.confirm) {
					uni.redirectTo({
						url: '/pages/login/login'
					})
					commit("SET_USER_INFO", null);
					commit("SET_TOKEN", '');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.usInfoTop {
		width: 100%;
		height: 340rpx;
		@include bg();
		color: #fff;
		font-size: 28rpx;

		.userImgBox {
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			margin: 0;
			padding: 0;
			margin-bottom: 30rpx;
		}

		.userImg {
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
		}

		.img {
			width: 32rpx;
			height: 32rpx;
		}

		.mr10 {
			margin-right: 30rpx;
		}

		.input {
			width: 150rpx;
		}

	}

	.gsList {
		width: 100%;
		color: #555;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
		height: 120rpx;
		border-radius: 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;

		.img {
			width: 42rpx;
			height: 32rpx;
		}

		.img1 {
			width: 26rpx;
		}
	}

	.tcBtn {
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		@include bg();
		text-align: center;
		border-radius: 10rpx;
		margin: 0 auto;
	}
</style>